<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/service.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <title>
        服务中心-小米官方售后服务-小米官网
    </title>
</head>

<body>
    <!-- 顶部栏 -->
    <div class="topBar">
        <div class="container">
            <!-- 顶部栏由三块组成，列表，购物车以及登录 -->
            <!-- 顶部栏的列表区 -->
            <div class="topBar-list">
                <!-- 每个列表可以分为两部分，一个a标签代表链接以及span标签“|”分隔开 -->
                <a href="./index.html">小米官网</a>
                <span>|</span>
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">小米澎湃OS</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="./download.html" class="a_download">下载app
                    <div class="download">
                        <img src="./img/download.png" alt="">
                        <p>小米商城app</p>
                    </div>
                    <div class="stri"></div>
                </a>
                <span>|</span>
                <a href="#">Select Location</a>
                <span>|</span>
            </div>
            <!-- 顶部栏的购物车区 -->
            <div class="shop">
                <a href="#">
                    <i class="iconfont">&#xe690;</i>
                    <i>购物车（0）</i>
                </a>
                <div class="cart-list">
                    购物车中还没有商品,赶紧选购吧!
                </div>
            </div>
            <!-- 顶部栏的登录区 -->
            <div class="login">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
    <!-- 右侧固定访问 -->
    <div class="tool-bar">
		<ul>
			<li class="open-box">
				<a href="#">
					<img src="./img/side1gray.png" class="static">
					<img src="./img/side1.png" class="hover">
					<span>手机APP</span>
					<div class="app-download">
						<img src="./img/download.png">
						<span>扫码领取新人百元红包</span>
					</div>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/side2gray.png" class="static">
					<img src="./img/side2.png" class="hover">
					<span>个人中心</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/side3gray.png" class="static">
					<img src="./img/side3.png" class="hover">
					<span>售后服务</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/side4gray.png" class="static">
					<img src="./img/side4.png" class="hover">
					<span>人工客服</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="./img/side5gray.png" class="static">
					<img src="./img/side5.png" class="hover">
					<span>购物车</span>
				</a>
			</li>
		</ul>
	</div>
    <!-- 导航栏 -->
    <div class="header">
        <div class="container">
            <!-- 导航栏由三块组成，图标，列表，以及搜索框 -->
            <!-- 导航栏的图标区 -->
            <div class="site-logo">
                <a href="#">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
            <!-- 导航栏的列表区 -->
            <div class="site-list">
                <ul class="clearfix">
                    <li style="margin-left: 50px;"><a href="#">全部产品分类</a></li>
                    <li><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            
            <!-- 导航栏的搜索框 -->
            <div class="site-search">
                <form action="">
                    <input type="text" name="search" class="search-text" placeholder="耳机">
                    <input type="submit" class="search-btn iconfont" value="&#xe8d6;" style="font-size: 24px;">
                </form>
            </div>
        </div>
    </div>
    <!-- 面包屑导航条 -->
    <div class="breadcrumbs">
        <div class="container">
            <a href="./index.html">首页</a>
            <span class="sep">/</span>
            <a href="./service.html">服务中心</a>
        </div>
    </div>
    <!-- 主体区域 -->
    <div class="service-index">
        <!-- 轮播图 -->
        <div class="carousel">
            <div class="banner">
                <ul class="imgList">
                    <li><img src="./img/banner1.jpg" alt=""></li>
                    <li><img src="./img/banner2.jpg" alt=""></li>
                    <li><img src="./img/banner3.jpg" alt=""></li>
                    <li><img src="./img/banner4.jpg" alt=""></li>
                    <li><img src="./img/banner5.jpg" alt=""></li>
                </ul>
                <div class="circle"></div>
            </div>
        </div>
        <!-- 自助售后服务 -->
        <div class="service-index-fquestion">
            <h2 class="webfont">自助售后服务</h2>
            <div class="fquestion clearfix">
                <div>
                    <ul>
                        <li class="service-transi-up">
                            <a href="#">
                            <img src="./img/ddabed31ca10eff541841d281bc8e1dd.png" alt="">
                                <h3>申请售后</h3> <span>小米售后服务中心</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                            <img src="./img/dfba7846fcdcd60e2191c384dbdf5657.png" alt="">
                                <h3>服务进度</h3> <span>一键查询，方便快捷</span>
                            </a></li>
                        <li class="service-transi-up"><a href="#">
                            <img src="./img/2eff862170be170ebba69a60af3fc5b8.png" alt="">
                                <h3>售后政策</h3> <span>条款说明，安心保障</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                                <img src="./img/6e9a575b3841a30423b53fcdcb3ec8bd.png" alt="">
                                <h3>维修价格</h3> <span>官方维修，价格透明</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                                <img src="./img/dfb34ff8a5816a7ee6baca61babe099d.png" alt="">
                                <h3>小米之家</h3> <span>小米之家门店查询</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                                <img src="./img/c92109214e81251be02845e5662fdf8a.png" alt="">
                                <h3>小米客服</h3> <span>在线咨询，客服热线</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                                <img src="./img/67cc7c49b0b3f6faefbf06f156700d10.png" alt="">
                                <h3>真伪查询</h3> <span>官方验证，为您保障</span>
                            </a></li>
                        <li class="service-transi-up">
                            <a href="#">
                                <img src="./img/001973d52f3ccd0d1a1842187f0d0b8f.png" alt="">
                                <h3>保障服务</h3> <span>碎屏延保，双重保障</span>
                            </a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 脚部 -->
    <div class="footer">
        <div class="container">
            <!-- 脚部一共分为两部分，上部分的服务以及其他小字 -->
            <div class="footer-service">
                <ul class="clearfix">
                    <li class="first">
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe600;</i>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe638;</i>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe790;</i>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe768;</i>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#">
                        <i class="iconfont">&#xe641;</i>
                        人工客服
                    </a>
                </div>
            </div>

        </div>
    </div>
</body>
<!-- 利用Js实现service的轮播 -->
<script src="./js/service.js"></script>
</html>